@use "../variables" as *;
@use "sass:color";

.jobs-and-logs {
  grid-template-rows: 14rem 23rem;
  height: 37.5rem;

  .jobs-section,
  .logs-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .jobs-section {
    border-bottom: 2px solid var(--border-color);
    .jobs-tab {
      flex: 1;
      overflow-y: auto;
    }
  }

  .logs-section {
    .logs-tab {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      .search-row {
        margin: 0 1rem;
      }
      .logs-table-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        .logs-table {
          max-height: none;
          height: 100%;
        }
      }
    }
  }
}

.jobs-panel {
  .panel-content {
    display: inline-block;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    padding: 0;
  }
}

.jobs-tab {
  overflow-y: auto;
  height: 100%;
  &.bp6-popover {
    margin-top: 1.5rem;
  }
  table {
    text-align: left;
    border-radius: 0;
    p {
      padding: 1rem;
    }
    .job-status,
    .job-name {
      width: 20rem;
    }
    thead {
      position: sticky;
      top: 0;
      z-index: 999;
    }
    tr {
      transform: scale(1);
      vertical-align: top;
    }
    th,
    td {
      font-size: 1.2rem;
      padding: 0.75rem;
    }
    th {
      text-transform: uppercase;
    }
    .right-align {
      text-align: right;
      width: 0;
    }
    .progress {
      position: absolute;
      top: 0;
      left: 0;
      height: 99%;
      opacity: 0.5;
      border-radius: 0;
      pointer-events: none;
    }
    .fa-clock-o {
      cursor: default !important;
    }
  }
}

.jobs-panel-portal {
  .bp6-popover-content {
    padding: 0;
    width: min(500px, 100vw);
    max-height: calc(100vh - 10rem);
    overflow: hidden;
  }
}
